<template>
	<view class="con">
		<view class="item" v-for="(item,index) in dataInfo" :key="index">
			<view class="goodbox">
				<image :src="item.imageUrl" mode="aspectFill" class="goosimg"></image>
				<view class="goodname">{{item.goodsName}}</view>
			</view>
			<view class="textox">
				<textarea  v-model="item.c_text" placeholder="输入评价类容" :maxlength="300" />
			</view>
			<view class="imgbox" v-if="flag">
				<view v-for="(it,i) in item.imgList" class="img-box">
					<image :src="it" mode="aspectFill" class="img"  ></image>
					<view class="del" @click="del(it,item.imgList)">
						<u-icon name="trash" color="#666" size="24"></u-icon> 
					</view>
				</view>
				<view class="img-box" @click="upImg(index)" v-if="item.imgList.length<5">
					<u-icon name="photo" color="#999" size="60"></u-icon> 
				</view>
			</view>
		</view>
		<view class="btnbox">
			<view class="btn" @click="ok">立即评价</view>
		</view>
	</view>
</template>

<script>
	import {pinjia,ptpj} from"../../api/product.js"
	export default{
		data(){
			return{
				dataInfo:{},
				flag:true,
				type:1 //0拼团 1 正常
			}
		},
		onLoad(e) {
			console.log(e.data)
			if(e.type){
				this.type=e.type
			}
			this.dataInfo=JSON.parse(e.data)
			this.dataInfo.forEach(item=>{
				item.imgList=[]
				item.c_text=""
			})
			console.log(this.dataInfo)
		},
		methods:{
			upImg(index){
				this.upimgs((res)=>{
					this.flag=false
					this.dataInfo[index].imgList.push(res)
					console.log(this.dataInfo[index].imgList)
					this.flag=true
				},1)
			},
			async ok(){
				let data=[]
				this.dataInfo.forEach((item,index)=>{
					data[index]={}
					data[index].content=item.c_text
					if(item.c_text==''){
						this.msg("评价未填写","none")
						return
					}
					data[index].orderId=item.orderId
					data[index].goodsId=item.goodsId
					data[index].commentImageUrl=item.imgList.join(",")
				})
				console.log(data)
				let url=pinjia
				if(this.type==0){
					url=ptpj
				}
				let res=await this.post(url,data)
				this.msg("发布成功")
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
				console.log(res)
			},
			del(url,list){
				this.flag=false
				list.forEach((item,index)=>{
					if(item==url){
						list.splice(index,1)
					}
				})
				this.flag=true
			}
		}
	}
</script>

<style>
	.del{
		position: absolute;
		top: -10rpx;
		right: -10rpx;
	}
	.img-box{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10rpx;
	}
	.btn{
		margin-top: 60rpx;
		border-radius: 10rpx;
		background-color: #F0812D;
		text-align: center;
		line-height: 66rpx;
		height: 66rpx;
		width: 400rpx;
		color: #FFFFFF;
		
	}
	.btnbox{
		display: flex;
		justify-content: center;
	}
	.img{
		width: 100rpx;
		height: 100rpx;
	}
	.imgbox{
		display: flex;
		flex-wrap: wrap;
	}
	.textox>textarea{
		font-size: 28rpx;
		color: #333333;
		
		
	}
	.goodname{
		font-size: 30rpx;
		line-height: 40rpx;
		color: #666666;
		padding: 20rpx;
	}
	.textox{
		width: 100%;
		padding: 20rpx;
		background-color: #F6F6F6;
		margin-bottom: 20rpx;
	}
	.goosimg{
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right:20rpx ;
	}
	.goodbox{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.item{
		width: 690rpx;
		margin: 10rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
	}
	page{
		background-color: #F6F6F6;
	}
</style>
